Các ứng dụng hiện tại của Fluent Fluent Design System

Ánh sáng (Light)

Biểu lộ sự nổi bật

Mục đích của ánh sáng là để thu hút sự chú ý và nhấn mạnh thông tin. Khi người dùng di chuột vào các thành phần UI, các dải sáng sẽ hiện lên ở viền của các đối tượng như menu hamburger và các nút bấm. Khi người dùng lựa chọn, chẳng hạn như nhấp chuột hoặc chạm, một hiệu ứng vòng tròn màu trắng xuất hiện.[11] Ngoài ra, khi chuyển qua môi trường Windows Holographic, con trỏ sẽ chuyển thành dạng một vòng tròn trắng.

Ngày 6 tháng 11 năm 2017, David Haz (nhân viên Microsoft) nói rằng nhóm đang có kế hoạch áp dụng các highlight để làm nổi bật các taskbar—nhưng tính đến tháng 12 năm 2017 họ vẫn chưa thực hiện xong.[12]

Biểu lộ sự tập trung

Các mục có thể tụ vào (focusable item) với viền sẽ sáng lên thông qua việc hướng sự tập trung vào yếu tố UI.[13]

Chiều sâu (Depth)

Chiều sâu cho phép tạo nên sự khác biệt giữa các nội dung bằng cách tạo ra nhiều lớp nội dung theo trục Z của màn hình hiển thị. Chiều sâu hiện diện ở việc đổ bóng cho nội dung và tạo độ sâu trục Z.[14][15] Điều này được thể hiện đặc biệt rõ ràng trong ứng dụng Office được thiết kế lại vào năm 2019.

Chuyển động (Motion)

Chuyển động thiết lập một mối quan hệ giữa các yếu tố UI và cung cấp cho người dùng một sự liền mạch trong trải nghiệm.[16]

Thêm/xóa chuyển động

Liệt kê các chuyển động để chèn và xóa các mục khỏi bộ sưu tập.[16]

Các chuyển động được kết nối (connected animations)

Các chuyển động được kết nối là sự chuyển tiếp của các thành phần UI. Khi một nội dung thay đổi, các thành phần của nó không mất đi ngay mà sẽ dần dần trượt ra khỏi ứng dụng.[17]

Chuyển đổi nội dung (content transition)

Được sử dụng khi chỉ một phần nội dung trên một trang thay đổi.[16]

Đào sâu (drill)

Drill được sử dụng khi điều hướng sâu hơn vào một ứng dụng. Ví dụ: hiển thị thêm thông tin sau khi một mục được chọn.[18]

Mờ dần (fade)

Fade-in và fade-out để đi vào và loại bỏ các mục khỏi vùng hiển thị.[16]

Thị sai (parallax)

Parallax di chuyển các đối tượng với ở các tốc độ khác nhau. Các thành phần "ở xa" so với người dùng sẽ di chuyển chậm hơn các thành phần "ở gần" so với người dùng. Ví dụ, ảnh nền của một danh sách sẽ di chuyển chậm hơn so với các đối tượng trên danh sách đó, tạo cho người dùng một cảm giác đồng thời về cả chiều sâu lẫn chuyển động.[19]

Phản hồi của thao tác nhấn

Khi một mục được nhấn, nó chìm xuống nền trong giây lát và  sau đó quay về vị trí cũ. Hiệu ứng này hiện có ở các lát gạch sống (live tiles) ở Start menu, các nút bấm hành động nhanh ở Action Center, và các nút ở thanh địa chỉ của Microsoft Edge.[20]

Chất liệu (Material)

Acrylic

Chất liệu Acrylic tạo ra hiệu ứng trong mờ với một chút hiệu ứng làm nhiễu (noise effect). Một hệ thống trực quan có thể được tạo ra bằng cách sử dụng các mức trong mờ khác nhau. Ví dụ, trong một ứng dụng, bề mặt nội dung chính thường là mờ hẳn nhằm giúp người dùng dễ đọc thông tin (ngoại trừ các widget hay ứng dụng nhẹ, chẳng hạn như Máy tính), một cửa sổ phụ có thể có 80% nền Acrylic và các khung phụ có thể có tới 60% nền Acrylic. Acrylic nền (Background Acrylic) làm mờ tất cả các mục đằng sau chất liệu Acrylic. Kiểu Acrylic nội ứng dụng (In-app Acrylic) làm mờ nội dung bên trong ứng dụng.

Acrylic bị vô hiệu hóa trong một số cửa sổ cụ thể khi người dùng đang làm việc với ứng dụng khác. Cả hai loại Acrylic bị vô hiệu hóa trên cả hệ thống khi hiệu ứng transparency bị vô hiệu hóa, khi chế độ tiết kiệm pin được bật, hoặc trên các hệ thống phần cứng cấp thấp. Acrylic nền bị vô hiệu khi cửa sổ bị bỏ chọn hoặc trên Windows 10 Mobile, HoloLens, hoặc ở chế độ máy tính bảng.[21]

Tỷ lệ (Scale)

Các ứng dụng chia tỉ lệ qua các yếu tố hình thức (form factors) khác nhau, kích thước hiển thị (display sizes) và 0D thành 3D. Các yếu tố thích ứng với kích thước màn hình của chúng và có sẵn trên nhiều kích thước. Các điều khiển nhận thấy cũng được phân loại trong Scale (ví dụ: thanh cuộn và đầu vào thích ứng với các phương thức gọi khác nhau)

Chưa được xác định

  • Âm thanh không gian (Spatial sound)[22]

Tài liệu tham khảo

WikiPedia: Fluent Design System http://fluent.microsoft.com https://arstechnica.com/information-technology/201... https://arstechnica.com/information-technology/201... https://www.eyerys.com/articles/news/fluent-design... https://www.instagram.com/p/B97VqkXg0iN/ https://answers.microsoft.com/en-us/windows/forum/... https://developer.microsoft.com/en-us/windows/mixe... https://developer.microsoft.com/windows/apps/desig... https://docs.microsoft.com/en-us/windows/uwp/desig... https://docs.microsoft.com/en-us/windows/uwp/desig...